<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, all" />
  <title>WebGL Earth API - Polygon Example</title>

  <script src="../cesium/Build/Cesium/Cesium.js"></script>
  <script src="http://localhost:9810/compile?id=api-debug"></script>

  <script>
    var app, poly;
    function startWE() {

      var options = {
        altitude: 360,
        position: [47.192, 8.523],
        proxyHost: 'http://srtm.webglearth.com/cgi-bin/corsproxy.fcgi?url='
      };

      app = new WebGLEarth('webglearthdiv', options);
      app.setBaseMap(app.initMap(WebGLEarth.Maps.OSM));
      app.showMiniGlobe('../deploy/world512.jpg', 128);
      app.setTilt(45);

      var defaultPoly = new WebGLEarth.Polygon(app);
      defaultPoly.setFillColor('#00ffff', 0.3);
      defaultPoly.addPoint(47.1966945, 8.52359601);
      defaultPoly.addPoint(47.1963864, 8.52475703);
      var cornerPoint =
      defaultPoly.addPoint(47.1954063, 8.52230885);
      defaultPoly.addPoint(47.1966242, 8.52120111);
      defaultPoly.addPoint(47.1967805, 8.52164874);
      defaultPoly.addPoint(47.1972796, 8.52242167);
      defaultPoly.addPoint(47.1972434, 8.52277868);
      defaultPoly.disableClickToAdd();
      defaultPoly.showDraggers(false);
      defaultPoly.onClick(reopenPoly);

      var defaultPoly2 = new WebGLEarth.Polygon(app);
      defaultPoly2.setFillColor('#00ff00', 0.3);
      defaultPoly2.addPoint(47.1965465487, 8.5211790565);
      defaultPoly2.addPoint(47.1953526123, 8.5222943548);
      defaultPoly2.addPoint(47.1942354599, 8.5196876980);
      defaultPoly2.addPoint(47.1958763746, 8.5188098538);
      defaultPoly2.disableClickToAdd();
      defaultPoly2.showDraggers(false);
      defaultPoly2.onClick(reopenPoly);

      // let the corner point animate in circle
      //   not very useful way of demonstrating the movePoint() method
      setInterval(function() {
        var alpha = 2 * Math.PI * (+new Date())/1000;
        var x_ = Math.cos(alpha)/8000;
        var y_ = Math.sin(alpha)/8000;
        defaultPoly.movePoint(cornerPoint, 47.1954063 + x_, 8.52230885 + y_);
        document.getElementById('info3div').innerHTML = "The two default polygons " + (defaultPoly.intersects(defaultPoly2) ? "DO" : "DO NOT") + " intersect.";
      }, 50);
    }

    function reopenPoly(pol_) {
      if (poly) {
        // disable old active polygon
        poly.disableClickToAdd();
        poly.showDraggers(false);
      }
      poly = pol_;
      poly.showDraggers(true);
      poly.setOnChange(onchange);
    }

    function startPoly() {
      if (poly) {
        closePoly();
      }
      poly = new WebGLEarth.Polygon(app);
      poly.enableClickToAdd();
      poly.setOnChange(onchange);
      setBorder('#000000', 0.9);
      poly.setFillColor('#eedd00', 0.6);
      poly.onClick(reopenPoly);
      document.getElementById('infodiv').innerHTML = 'Create polygon by clicking on the ground, Alt-click on polygon node to remove it.';
    }

    function closePoly() {
      if (!poly) return;
      poly.disableClickToAdd();
      poly.showDraggers(false);
      poly = null;
      document.getElementById('infodiv').innerHTML = '';
      document.getElementById('info2div').innerHTML = '';
    }

    function removePoly() {
      if (!poly) return;
      poly.destroy();
      poly = null;
    }

    var borderHex = '#000000', borderAlpha = 1; //remember the color so we can visualize invalid polygons
    function onchange() {
      if (poly) {
        document.getElementById('info2div').innerHTML =
            poly.isValid() ? poly.getRoughArea().toFixed(2) + ' m2' :
            'Invalid polygon (self-intersecting or  < 3 vertices)';
        if (poly.isValid()) {
          poly.setStrokeColor(borderHex, borderAlpha);
        } else {
          poly.setStrokeColor('#ff0000', 1);
        }

        // when the user has already defined already at least 4 points,
        //   disable the "click-to-add" feature
        if (poly.getPoints().length >= 4) {
          poly.disableClickToAdd();
        } else {
          poly.enableClickToAdd();
        }
      }
    }

    function setBorder(hex, opt_a) {
      if (poly) {
        borderHex = hex;
        borderAlpha = opt_a;
        poly.setStrokeColor(hex, opt_a);
      }
    }

    function randomIcon() {
      if (poly) {
        poly.setIcon('../deploy/world512.jpg', 50, 30);
      }
    }
  </script>

 </head>
 <body onload="javascript:startWE()">
   <div id="webglearthdiv" style="width:600px;height:400px;"></div>
   <div id="infodiv" style="width:600px;height:20px;"></div>
   <div id="info2div" style="width:600px;height:20px;"></div>
   <div id="info3div" style="width:600px;height:20px;"></div>
   <br />
   <input type="button" id="start" value="Start new polygon" onclick="javascript:startPoly()"/>
   <input type="button" id="close" value="Close polygon" onclick="javascript:closePoly()"/>
   <input type="button" value="Remove polygon" onclick="javascript:removePoly()"/>
   <br />
   <input type="button" value="Make green" onclick="javascript:if(poly)poly.setFillColor('#00aa00', 0.7);"/>
   <input type="button" value="Make blue" onclick="javascript:if(poly)poly.setFillColor('#0000ff', 0.4);"/>
   <input type="button" value="Yellow border" onclick="javascript:setBorder('#ffff00');"/>
   <input type="button" value="Black border" onclick="javascript:setBorder('#000000', 0.8);"/>
   <br />
   Change fill color:
   <select onchange="javascript:if(poly)poly.setFillColor(this.value, 0.7);">
     <option value="#7bfffb">#7bfffb</option>
     <option value="#f8ff7d">#f8ff7d</option>
     <option value="#5aff5a">#5aff5a</option>
     <option value="#fc7361">#fc7361</option>
     <option value="#ee84fc">#ee84fc</option>
     <option value="#bab3b8">#bab3b8</option>
   </select>
   Change border color:
   <select onchange="javascript:setBorder(this.value);">
     <option value="#7ad3ff">#7ad3ff</option>
     <option value="#ffdb74">#ffdb74</option>
     <option value="#fc2009">#fc2009</option>
     <option value="#fc7361">#fc7361</option>
     <option value="#f225fc">#f225fc</option>
     <option value="#7b7679">#7b7679</option>
   </select>
   <br />
   <input type="button" value="Assign icon" onclick="javascript:randomIcon();"/>
   <input type="button" value="Remove icon" onclick="javascript:if(poly)poly.setIcon('');"/>
   <br />
   <input type="button" value="Force pause rendering" onclick="javascript:app.pauseRendering();"/>
   <input type="button" value="Resume rendering" onclick="javascript:app.resumeRendering();"/>
   <br />
   <input type="button" value="Download as PNG" onclick="javascript:app.saveScreenshot('screenshot.png')"/>
   <input type="button" value="Open in popup (may get blocked)" onclick="javascript:app.getScreenshot(function(url) {window.open(url, '_blank');});"/>
   <input type="button" value="Display screenshot below" onclick="javascript:app.getScreenshot(function(url) {document.getElementById('screenshot').src = url;});"/>
   <br />
   <img id="screenshot" />
 </body>
</html>
